<template>
	<view class="order" @click="handleClick">
		<view class="order-h">
			<text class="name">{{ obj.hospitalName }}</text>
			<text class="state">{{ obj.serviceStatus | setStatus }}</text>
		</view>
		<view class="order-b" v-if="obj">
			<u--image :src="obj.imgUrl ? obj.imgUrl.split(',')[0] : ''" width="168rpx" height="168rpx" radius="12rpx"></u--image>
			<view class="order-b-info">
				<view class="title multi-ellipsis-1">{{ obj.productName }}</view>
				<view class="sku"></view>
				<view class="body">
					<view class="price">
						<text>¥{{ obj.price | filterFix2 }}</text>
						<text class="old">¥{{ obj.originPrice | filterFix2 }}</text>
					</view>
					<view class="num">x{{ obj.bookingNum }}</view>
				</view>
			</view>
		</view>
		<view class="order-d">
			<view class="time">
				预约时间 {{ obj.bookingTime }}
				<view class="countDown" v-if="countDownTime">
					预约倒计时：
					<u-count-down @change="onChange" :time="countDownTime" format="HH:mm:ss" v-if="countDownTime">
						<text v-if="timeData.hours && timeData.hours > 0">{{ timeData.hours }}时</text>
						<text>{{ timeData.minutes }}分{{ timeData.seconds }}秒</text>
					</u-count-down>
				</view>
			</view>
			<view class="price">
				<text>实付款</text>
				<text class="t">￥{{ obj.totalAmount | filterFix2 }}</text>
			</view>
		</view>

		<view class="order-f" v-if="obj.serviceStatus == 0 || obj.serviceStatus == 2">
			<button class="btn" v-if="obj.serviceStatus == 0" @click.stop="cancel">取消订单</button>
			<button class="btn active" v-if="obj.serviceStatus == 0" @click.stop="pay">去付款</button>
			<button class="btn active" v-if="obj.serviceStatus == 2 && obj.commentFlag == 0" @click.stop="comment">去评价</button>
		</view>
	</view>
</template>

<script>
import dayjs from 'dayjs';

export default {
	name: 'JyqTalailaCServerOrder',
	props: {
		obj: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			timeData: {},
			countDownTime: ''
		};
	},
	filters: {
		filterTime(val) {
			return dayjs(new Number(val)).format('YYYY-MM-DD');
		},
		filterFix2(val) {
			if (val) return val.toFixed(2);
			else return '0';
		},
		setStatus(val) {
			switch (val) {
				case 0:
					return '待支付';
				case 1:
					return '待到院';
				case 2:
					return '已完成';
				case 5: //已退款
					return '已退款';
				case 21: // 自动取消
				case 22: // 手动取消
					return '已关闭';
				default:
					break;
			}
		}
	},
	mounted(){
		let NowTime = new Date();
		let endTime = new Date(this.obj.bookingTime)
		console.log(NowTime)
		console.log(endTime)
		this.countDownTime = endTime - NowTime.getTime();
	},
	methods: {
		onChange(e) {
			this.timeData = e;
		},
		handleClick() {
			this.$emit('click');
		},
		cancel() {
			this.$emit('cancel');
		},
		pay() {
			this.$emit('pay');
		},
		comment() {
			this.$emit('comment');
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep uni-button:after {
	border: none;
}
.order {
	margin: 16rpx 24rpx;
	padding: 24rpx;
	background: #ffffff;
	border-radius: 20rpx;
	&-h {
		margin-bottom: 32rpx;
		display: flex;
		justify-content: space-between;
		.name {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1a1a1a;
			line-height: 32rpx;
		}
		.state {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF5900;
			line-height: 28rpx;
		}
	}

	&-b {
		display: flex;
		&-info {
			flex: 1;
			margin-left: 24rpx;
			.title {
				margin-top: 16rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 400;
				color: #1a1a1a;
			}
			.sku {
				margin: 24rpx 0;
				height: 28rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
			}
			.body {
				display: flex;
				justify-content: space-between;
				.price {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #ff473d;
					line-height: 28rpx;
					.old {
						margin-left: 16rpx;
						text-decoration: line-through;
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
					}
				}
				.num {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
	&-d {
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.time {
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 22rpx;
		}
		.price {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1a1a1a;
			line-height: 28rpx;
			.t {
				margin-left: 16rpx;
			}
		}
	}
	&-f {
		margin-top: 48rpx;
		display: flex;
		justify-content: flex-end;
		.btn {
			margin: 0;
			margin-left: 16rpx;
			width: 176rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			border-radius: 32rpx;
			border: 1rpx solid #e6e6e6;
			&.active {
				color: #FF5900;
				border: 1rpx solid #FF5900;
			}
		}
	}
}
.countDown{
	display: flex;
	margin-top: 5rpx;
}
::v-deep .u-count-down{
	display: flex !important;
	justify-content: left !important;
	flex-direction:row !important
}
</style>
